<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }


        .workplace {
            padding: 15px;
        }

        .active {
            border-bottom: 2px rgb(234, 255, 0) solid;
        }

        .contentss:hover .submenu {
            /* 在鼠标移动到contentess的时候，期内submenu显示下面的效果 */
            display: block;
        }

        .buttonouter {
            background-color: pink;
            color: rgb(0, 5, 9);
            border: 0px;
            height: 30px;
            text-align: center;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px black solid;
        }

        .buttonouter:hover {
            background-color: bisque;
        }

        .outer:hover {
            background-color: beige;
        }

        .main {
            display: flex;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            flex-direction: column;
            padding-top: 30px;

        }

        .formitem {
            display: flex;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .formitem-right {
            flex: 1;
        }

        .formitem-label {
            width: 8em;
            /* 指最多八个字间隔,em就是字符宽度 */
        }

        .input {
            width: 100%;
            padding: 8px;
        }

        .btn-b {
            background-color: blue;
            color: white;
            border: 0;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px black solid;
        }

        .btn-b:hover {
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <div class="workplace">
        <!-- 入口 -->
        <div style="background-color: blanchedalmond; padding: 15px;">
            <span>录入客户信息之前建议进行查重，以防止您与同事的业务产生冲突！</span>
            <button type="button" class="buttonouter">立即查重</button>
        </div>
        <!-- 表单 -->
        <form action="" class="main">
            <!-- <input type="hidden" name="ownerUsername" id="ownerUsername"> -->
            <div class="formitem">
                <label class="formitem-label" for="un" style="padding-right: 5px;">顾客名称：</label>
                <div class="formitem-right">
                    <input name="name" type="text" id="name" class="input">
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <!-- 必须删除label框内自带字才能生效 -->
            <div class="formitem">
                <label class="formitem-label" for="">客户性别：</label>
                <div>
                    <label>
                        <input type="radio" name="gender" value="MALE" style="right: 50px;" checked>男
                    </label>
                    <label>
                        <input type="radio" name="gender" value="FEMALE">女
                    </label>
                </div>
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">顾客地址：</label>
                <div class="formitem-right">
                    <input type="text" id="address" name="address" class="input">
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">联系电话：</label>
                <div class="formitem-right">
                    <input type="text" id="phone" name="phone" class="input">
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">客户来源：</label>
                <div class="formitem-right">
                    <select class="input" name="source" id="source">
                        <option value="WORD_OF_MOUTH">口碑</option>
                        <option value="MEDIA">新媒体</option>
                        <option value="PROMOTION">地推活动</option>
                    </select>

                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">客户状态：</label>
                <div class="formitem-right">
                    <select class="input" name="state" id="state">
                        <option value="UNKNOWN">意向未定</option>
                        <option value="INTENTIONAL">有意向</option>
                        <option value="DEALED">成交</option>
                    </select>

                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">最后跟进日期：</label>
                <div class="formitem-right">
                    <input class="input" type="date" id="lastFollowUpDate" name="lastFollowUpDate">
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;">最后跟进情况：</label>
                <div class="formitem-right">
                    <textarea class="input" name="lastFollowUpNote" id="lastFollowUpNote" rows="5"></textarea>
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
            <div class="formitem">
                <label class="formitem-label" for="" style="padding-right: 5px;"></label>
                <div class="formitem-right">
                    <button type="button" onclick="savedateinbase()" class="btn-b">保存</button>
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
        </form>
        <script src="jquery-3.6.0.js"></script>
        <script>
            $(document).ready(() => {
                const jsonString = sessionStorage.getItem("Currentuser");
                const currentUser = JSON.parse(jsonString);
                $("#ownerUsername").val(Currentuser.username);
            })

            function savedateinbase(){
                const data = $("form").serialize();
                $.ajax({
                    url: "http://localhost:8080/CreateNewCustomer",
                    method: "POST",
                    data: data,
                    dataType: "json",
                    success: (resp) => {
                        if (resp) {
                            alert("数据保存成功");
                        } else {
                            alert("数据保存失败");
                        }
                    }
                })
            };
        </script>

    </div>
</body>

</html>